<template>
    <div class="goodContent">
        <!-- 头部占位 -->
        <div class="Header">
            <HeaderTitle></HeaderTitle>
        </div>
        <!-- 轮播图 -->
        <van-swipe class="BannerYc1" >
            <van-swipe-item class="BannerItemYc1" v-for="(item,index) in bannerlist" :key="index">
                <img class="BannerImgYc1"
                    :src="item">
            </van-swipe-item>
            <!-- 计数页 -->
            <template #indicator="{ active, total }">
                <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            </template>
        </van-swipe>

        <!-- 价格重点 倒计时 -->
        <div class="goodCenterYc">
            <div class="goodPriceTimeYc">
                <div class="goodTimeYc">
                    {{ GoodsDetailsData.banner.processBanner && GoodsDetailsData.banner.processBanner.title }} | {{ GoodsDetailsData.banner.processBanner && GoodsDetailsData.banner.processBanner.timePrefix }} <van-count-down id="goodTimeCountDown1" time="226021139" format="DD天HH时mm分ss秒" auto-start />
                </div>
                <div class="goodPriceYc" v-if="GoodsDetailsData.banner.processBanner">
                    <span>
                        <span class="goodPriceYc1">¥</span>{{ GoodsDetailsData.banner.processBanner.priceInfo && GoodsDetailsData.banner.processBanner.priceInfo.basicPrice }}</span>
                    <div class="goodPriceYc2">
                        {{GoodsDetailsData.banner.processBanner.priceInfo.finalPrice && GoodsDetailsData.banner.processBanner.priceInfo.finalPrice.prefix}}¥
                        <span class="goodPriceYc2Text1">{{GoodsDetailsData.banner.processBanner.priceInfo.finalPrice && GoodsDetailsData.banner.processBanner.priceInfo.finalPrice.price}}</span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="goodImgYc">
                <img :src="GoodsDetailsData.banner.processBanner && GoodsDetailsData.banner.processBanner.logoUrl">
            </div>
        </div>
        <!-- 产品简介 -->
        <div class="goodBlurb">
            <div class="blurbTop">
                <div class="blurbTop1">{{ GoodsDetailsData.name }}</div>
                <div class="blurbTop2"><img
                        :src=" GoodsDetailsData.simpleBrandInfo.logoUrl"><span>{{ GoodsDetailsData.simpleBrandInfo && GoodsDetailsData.simpleBrandInfo.title }}</span></div>
                <div class="blurbTop3">推荐理由</div>
            </div>
            <ul class="blurbBottom">
                <li class="blurbBottom1 blurbBottomMargin" v-for="(item,index) in GoodsDetailsData.recommendReason" :key="index">
                    <div class="blurbKey">{{ index+1 }}</div>
                    <div class="blurbBottom1T">{{item}}</div>
                </li>
            </ul>
        </div>
        <!-- 广告 -->
        <div class="goodAdvert">
            <img src="https://yanxuan.nosdn.127.net/static-union/16790249238cd1e9.png?imageView&quality=75">
        </div>
        <!-- 商品购买配置 -->
        <div class="goodDispose">
            <van-cell-group class="goodDisposeGroup ">
                <van-cell is-link :center="true" border title="邮费：满99包邮" @click="show = true"
                    class="preferentialYc1 goodDisposeItem" :class="{ dividerYc1: true }" />
                <van-cell is-link :center="true" border title="购物返：最高返7积分" @click="show = true"
                    class="preferentialYc2 goodDisposeItem" :class="{ dividerYc1: false }" />
            </van-cell-group>

            <van-cell-group class="goodDisposeGroup ">
                <van-cell is-link :center="true" border title="请选择规格数量" @click="show = true"
                    class="measurementYc goodDisposeItem" :class="{ dividerYc1: true }" />
                <van-cell :center="true" border title="限制：该商品不可使用优惠券" class="astrictYc goodDisposeItem"
                    :class="{ dividerYc1: true }" />
                <van-cell is-link :center="true" border @click="show = true" class="deliveryYc goodDisposeItem"
                    :class="{ dividerYc1: true }">
                    <template #title>
                        <span class="custom-title1">配送：</span>
                        <span class="custom-title2">请选择配送地址</span>
                    </template>
                </van-cell>
                <van-cell is-link :center="true" border @click="show = true" class="serveYc "
                    :class="{ dividerYc1: false }">
                    <template #title>
                        <div class="serveContent">
                            <div class="serveLeft">服务：</div>
                            <ul class="serveRight">
                                <li class="serveRightItem">
                                    <div class="serveRightItemLeft"></div>
                                    <div class="serveRightItemRight">商家入驻</div>
                                </li>
                                <li class="serveRightItem">
                                    <div class="serveRightItemLeft"></div>
                                    <div class="serveRightItemRight">商家入驻</div>
                                </li>
                                <li class="serveRightItem">
                                    <div class="serveRightItemLeft"></div>
                                    <div class="serveRightItemRight">商家入驻</div>
                                </li>
                                <li class="serveRightItem">
                                    <div class="serveRightItemLeft"></div>
                                    <div class="serveRightItemRight">商家入驻</div>
                                </li>
                            </ul>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <!-- 轮播图广告 -->
        <van-swipe class="goodAdvertBanner" :autoplay="3000" indicator-color="white">
            <van-swipe-item class="advertBannerItem" v-for="(item, index) in GoodsDetailsData.adBanners" :key="index">
                <img class="advertBannerImg" :src="item.picUrl" />
            </van-swipe-item>
        </van-swipe>
        <!-- 用户评价 -->
        <van-cell-group class="userAppraise">
            <van-cell is-link :center="true" border title="用户评价(47173)" @click="show = true" class="userAppraiseItem1"
                :class="{ dividerYc1: true }" />
            <van-cell :center="true" border title="内容" class="userAppraiseItem2" :class="{ dividerYc1: false }">
                <template #title>
                    <div class="userYc">
                        <img class="userYcImg"
                            src="//yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png?type=webp&imageView&quality=75&thumbnail=60x60">
                        <span class="userYcText">用****8</span>
                    </div>
                    <div class="timeYc">2021-12-01 09:32:42</div>
                    <div class="contentYc">好看</div>
                    <div class="imgYc">
                        <div class="imgYcItem">
                            <img
                                src="https://yanxuan.nosdn.127.net/6e3f2ab3f9e0ec65f189a9d6ce7dc06d.jpg?watermark&type=2&gravity=southeast&dissolve=80&font=c2ltZmFuZw==&fontsize=400&fontcolor=d2hpdGU=&text=eXgxNjIzMTMzMjA=|imageView&quality=75&thumbnail=144x0&type=webp">
                        </div>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>
        <!-- 店铺 -->
        <div class="goodShopYc">
            <div class="goodShopYc1">
                <div class="shopImgYc">
                    <img src="https://yanxuan-item.nosdn.127.net/953fd27555b9382e9d3d656a54398953.png">
                </div>
                <div class="shopContentYc">
                    <div class="shopContentYc1">
                        网易严选
                    </div>
                    <div class="shopContentYc2">
                        以“让美好生活触手可及”为初心，网易严选逐步发展成为中国新中产喜爱的生活方式品牌。
                    </div>
                </div>
            </div>
        </div>
        <!-- 详情 -->
        <div class="goodDetails">
            <div class="goodDetailstt">
                商品参数
            </div>
            <div class="goodDetailsItem">
                <div class="left">功效</div>
                <div class="right">显色、易上色</div>
            </div>
            <div class="goodDetailsItem">
                <div class="left">注册备案名称</div>
                <div class="right">网易严选柔雾哑光唇釉03酒渍甜莓、网易严选柔雾哑光唇釉01乌龙蜜桃、网易严选柔雾哑光唇釉02红棕赤茶、网易严选柔雾哑光唇釉04枫糖蜜橘</div>
            </div>
            <div class="goodDetailsItem">
                <div class="left">注册备案编号</div>
                <div class="right">浙G妆网备字2020017709、沪G妆网备字2022005765、沪G妆网备字2022005766、沪G妆网备字2022005771</div>
            </div>
        </div>
        <!-- 商品图片详情 -->
        <div class="goodImgDetails">

        </div>
        <!-- 说明 -->
        <div class="goodExplain">
            <div class="goodExplainShell">
                <header class="shellHeader">
                    常见问题
                    <div class="shellHeaderB"></div>
                </header>
                <div class="shellContent">
                    <div class="shellContentTT">
                        <div class="TTleft"></div>
                        <span class="TTright">网易严选的订单如何配送？</span>
                    </div>
                    <div class="shellContentCT">
                        网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。</div>
                </div>
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="goodLike">
            <header class="LikeHeader">
                猜你喜欢
                <div class="LikeHeaderB"></div>
            </header>
            <ul class="contentList">
                <!-- 单个商品卡片 -->
                <li class="contentGoods">
                    <img src="https://yanxuan-item.nosdn.127.net/2a083f0c4d63433ad3271f591fa6da93.jpg?type=webp&imageView&quality=65&thumbnail=330x330"
                        class="contentGoodImg">
                    <div class="contentGoodText">
                        <img src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" class="logo1"
                            :class="{ showNO: true }">
                        紧致修护成分极简栀子花胶原眼部精华15ml
                    </div>
                    <div class="contentGoodRedpaper">
                        <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" class="logo2">
                        <span>可用红包</span>
                    </div>
                    <div class="contentGoodPrice">
                        到手￥<span class="text1">109</span>.5
                        <del class="text2">¥199</del>
                    </div>
                    <div class="contentGoodActivity" :class="{ showWidth: true }">
                        <img src="./img/b268d0d2f46c41d3b3edf5fa33eea3de.png" class="logo3">
                        <div class="Text3">满69减20元</div>
                        <div class="Text4">仅剩1天</div>
                    </div>
                    <img src="https://yanxuan.nosdn.127.net/static-union/1678945986e1f775.png" class="logo4">
                </li>
                <!-- <GoodCard v-for="item in itemList.itemList" :key="item.id" :item="item"></GoodCard> -->
            </ul>
        </div>

        <!-- 占位 -->
        <div class="zhanweiYc"></div>

        <!-- 底部 -->
        <div class="goodFooter">
            <div class="goodFooterItem1">
                <van-icon name="service-o" />
            </div>
            <div class="goodFooterItem2">立即购买</div>
            <div class="goodFooterItem3">加入购物车</div>
        </div>

        <van-action-sheet v-model:show="show" title="邮费" :round="false">
            <div class="actionCenter">
                <div class="actionCenterItem">
                    <div class="actionHeader">
                        <div class="actionHeaderA"></div>
                        满99元免邮
                    </div>
                    <div class="actionContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                    </div>
                </div>
                <div class="actionCenterItem">
                    <div class="actionHeader">
                        <div class="actionHeaderA"></div>
                        满99元免邮
                    </div>
                    <div class="actionContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                    </div>
                </div>
                <div class="actionCenterItem">
                    <div class="actionHeader">
                        <div class="actionHeaderA"></div>
                        满99元免邮
                    </div>
                    <div class="actionContent">
                        本商品由严选自营仓发货，单笔订单金额（不含邮费）大陆地区满99元免邮费，不满99元收取8元邮费；港澳台地区满500元免邮费，不满500元收取30元邮费；海外地区以下单页提示运费为准。
                    </div>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'GoodsDetails',
})
</script>

<script lang="ts" setup>
import HeaderTitle from "@/components/HeaderTitle/index.vue"
import GoodCard from "@/components/GoodCard/index.vue"
import goodsDetailsApi from "@/api/goodsDetailsApi"
import type {IdetailsDataitem,IpolicyItem} from "@/api/goodsDetailsApi"
import { useRoute } from "vue-router"
import { ref,onMounted,computed } from "vue"

// 接受数据
const route = useRoute()
const Id = route.query.Id
 

// const bannerlist = ref([
//     {
//         picUrl: 'https://yanxuan.nosdn.127.net/67ec78e1c91832d31fdfae6977fd29fe.jpg?quality=75&type=webp&imageView&thumbnail=750x0'
//     },
//     {
//         picUrl: 'https://yanxuan.nosdn.127.net/static-union/16795536589d9b90.jpg?quality=75&type=webp&imageView&thumbnail=750x0'
//     }
// ])
const show = ref(false)
// 商品数据总汇数据
const GoodsDetailsData = ref<IdetailsDataitem>({
    id: '',
    listPicUrl: '',
    name: '',
    seoTitle: '',
    simpleDesc: '',
    primaryPicUrl: '',
    primarySkuId: '',
    retailPrice: '',
    counterPrice: '',
    sortOriginPrice: '',
    status: '',
    updateTime: '',
    itemDetail:{
    },
    // 选择型号重新渲染页面的数据
    skuList:[],
    // 产品参数
    attrList:[],
    // 库存 价格图片
    skuMap:[],
    // 选择产品列表
    skuSpecList:[],
    // 销售量
    sellVolume:'',
    // 常见问题数据列表
    issueList:[],
    // 评论列表
    comments:[],
    // 活动类型描述
    promotionDesc:'',
    // 特征列表
    characteristicList:[],
    // 广告横幅-轮播
    adBanners:[],
    //项目限制
    itemLimit:'',
    // 好评率
    goodCmtRate:'',
    // 购物返
    shoppingReward:{},
    // 购物返详情弹出
    shoppingRewardRule:{},
    // 推荐理由
    recommendReason:[],
    // 运费
    skuFreight:{},
    // 品牌信息
    brandInfo:{},
    // 简单品牌信息
    simpleBrandInfo:{},
    // 简易价格数据
    price:{},
    // 横幅价格栏目
    banner:{},
})
// 服务列表说明
const policyData = ref<IpolicyItem[]>([])

// 发送请求获取数据
async function getGoodsDetailsData(Id: number | string) {
    
    try {
        const res = await goodsDetailsApi.getGoodsDetailsData(Id)
        
        GoodsDetailsData.value = res.item
        policyData.value = res.policyList
        // policyList
        // console.log('发送请求获取数据成功');
    } catch (error) {
        console.log('发送请求获取数据失败');
    }
}
// 整理数据轮播图
const bannerlist = computed(()=>{
    let obj = JSON.parse(JSON.stringify(GoodsDetailsData.value.itemDetail || {}))
    // let obj1 = GoodsDetailsData.value.itemDetail 
    delete obj.detailHtml
    delete obj.videoInfo
    // console.log(obj,1);
    // console.log(obj1,2);
    let arr = [];
    for (let i in obj) {
        arr.push(obj[i])
    }
    return arr
})
// 整理广告数据轮播图
// const adBanners = computed(()=>{
//     return GoodsDetailsData.value.adBanners
// })
// 

onMounted(()=>{
    getGoodsDetailsData(Id as any)
})
</script>

<style lang="less" scoped>
// 主体
.goodContent {

    // 头部占位
    .Header {
        width: 355px;
        height: 44px;
        padding: 0 8px 0 12px;
        background-color: aquamarine;
    }

    // 轮播图
    .BannerYc1 {
        width: 375px;
        height: 375px;

        .BannerItemYc1 {
            .BannerImgYc1 {
                width: 100%;
                height: 100%;
            }
        }

        // 计数页
        .custom-indicator {
            position: absolute;
            right: 12.5px;
            bottom: 16px;
            padding: 0 4px;
            font-size: 12px;
            background: #fff;
            border-radius: 5px;
        }
    }

    // 价格重点 倒计时
    .goodCenterYc {
        width: 360px;
        height: 74px;
        background-color: #fa1e32;
        padding-left: 15px;

        .goodPriceTimeYc {
            float: left;
            width: 285px;
            padding-top: 8px;
            color: #fff;

            .goodTimeYc {
                width: 100%;
                height: 18px;
                margin-bottom: 4px;
                #goodTimeCountDown1{
                    display: inline-block;
                    color: #fff;
                    height: 18px;
                    font-size: 12px;
                }
            }

            .goodPriceYc {
                width: 100%;
                height: 43px;
                font-size: 28px;
                font-weight: 700;

                .goodPriceYc1 {
                    font-size: 18px;
                }

                .goodPriceYc2 {
                    display: inline-block;
                    font-size: 12px;
                    background-color: #fff;
                    color: #fa1e32;
                    border-radius: 10px;
                    height: 23px;
                    line-height: 23px;
                    padding: 0 4px;
                    margin-left: 4px;
                    vertical-align: middle;
                    position: relative;
                    top: -1px;

                    .goodPriceYc2Text1 {
                        font-size: 16px;
                        height: 23px;
                        line-height: 23px;
                        vertical-align: middle;
                    }
                }
            }
        }


        .goodImgYc {
            width: 75px;
            height: 74px;
            display: inline-block;
            position: relative;

            img {
                position: absolute;
                top: 50%;
                transform: translate(0, -50%);
                width: 100%;
                height: 40px;
            }
        }
    }

    // 产品简介
    .goodBlurb {
        width: 360px;
        padding: 13px 0 18px 15px;

        .blurbTop {
            width: 254px;
            padding-right: 106px;
            margin-top: 7px;

            .blurbTop1 {
                width: 100%;
                margin-bottom: 2px;
                font-size: 16px;
                font-weight: 700;
            }

            .blurbTop2 {
                width: 100%;
                height: 28px;
                margin: 3px 0 2.5px;
                display: flex;
                justify-content: flex-start;
                align-content: center;
                flex-wrap: wrap;

                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 4px;
                }

                span {
                    color: #7f7f7f;
                    font-size: 12px;
                    height: 18px;
                }
            }

            .blurbTop3 {
                width: 100%;
                height: 18px;
                color: #333;
                font-size: 12px;
                font-weight: 100;
            }
        }

        .blurbBottom {
            width: 323px;
            padding: 7px 10px;
            border: 1px solid #e6e6e6;
            margin-top: 6px;

            .blurbBottom1 {
                width: 100%;
                height: 18px;
                line-height: 18px;
                vertical-align: middle;

                .blurbKey {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border: 1px #dd1a21 solid;
                    color: #dd1a21;
                    border-radius: 50%;
                    line-height: 12px;
                    text-align: center;
                    vertical-align: middle;
                    font-weight: 700;
                    margin-right: 4px;
                }

                .blurbBottom1T {
                    display: inline-block;
                    height: 18px;
                    line-height: 18px;
                    vertical-align: middle;
                }
            }

            .blurbBottomMargin {
                margin-bottom: 2px;
            }
        }
    }

    // 广告
    .goodAdvert {
        width: 375px;
        height: 70px;
        border-top: 13px solid #f4f4f4;

        img {
            width: 100%;
            height: 100%;
        }
    }

    // 商品购买配置
    .goodDispose {
        width: 375px;

        .goodDisposeGroup {
            border-bottom: 10px solid rgb(244, 244, 244);
            padding-left: 15px;

            .goodDisposeItem {
                width: 360px;
                height: 52px;
                padding-left: 0;
            }

            .deliveryYc {
                .custom-title2 {
                    font-size: 14px;
                    color: #7f7f7f;
                }
            }

            .serveYc {
                width: 360px;
                padding-left: 0;

                .serveContent {
                    display: flex;
                    flex-shrink: 0;
                    flex-wrap: wrap;

                    .serveLeft {
                        width: 42px;
                    }

                    .serveRight {
                        width: 278px;
                        overflow: hidden;

                        .serveRightItem {
                            position: relative;
                            float: left;

                            .serveRightItemLeft {
                                position: absolute;
                                border-radius: 50%;
                                width: 4px;
                                height: 4px;
                                background-color: #dd1a21;
                                top: 9px;
                                left: 1px;
                            }

                            .serveRightItemRight {
                                font-size: 12px;
                                font-weight: 400;
                                padding-left: 8px;
                                margin: 0 20px 8px 0;
                            }
                        }
                    }
                }
            }
        }
    }

    // 轮播图广告
    .goodAdvertBanner {
        width: 375px;
        height: 100px;
        margin-bottom: 10px;

        .advertBannerItem {
            width: 100%;
            height: 100%;

            .advertBannerImg {
                width: 100%;
                height: 100%;
            }
        }
    }

    // 用户评价
    .userAppraise {
        width: 360px;
        padding-left: 15px;

        .userAppraiseItem1 {
            width: 360px;
            height: 46px;
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 0;
        }

        .userAppraiseItem2 {
            padding: 0 15px 15px 0;

            .userYc {
                display: flex;
                padding: 15px 0 2px 0;
                height: 32px;
                align-items: center;

                .userYcImg {
                    width: 32px;
                    height: 32px;
                    margin-right: 8px;
                    border-radius: 50%;
                }

                .userYcText {
                    margin-right: 6px;
                }
            }

            .timeYc {
                height: 12px;
                margin-top: 9px;
                font-size: 12px;
            }

            .contentYc {
                margin-top: 9px;
                padding-right: 15px;
                font-size: 14px;
            }

            .imgYc {
                margin-top: 11px;
                margin-bottom: 3px;

                .imgYcItem {
                    overflow: hidden;
                    position: relative;
                    width: 72px;
                    height: 72px;

                    img {
                        width: 72px;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }

            }
        }
    }

    // 店铺
    .goodShopYc {
        width: 375px;
        height: 103px;
        border-bottom: 10px solid rgb(244, 244, 244);
        border-top: 10px solid rgb(244, 244, 244);

        .goodShopYc1 {
            width: 375px;
            height: 88px;
            padding-bottom: 15px;
            display: flex;

            .shopImgYc {
                width: 90px;
                height: 88px;

                img {
                    width: 48px;
                    height: 48px;
                    margin: 25px 21px 0;
                }
            }

            .shopContentYc {
                width: 270px;
                height: 88px;
                margin-right: 15px;

                .shopContentYc1 {
                    width: 260px;
                    height: 24px;
                    margin: 20px 10px 8px 0;
                    font-size: 16px;
                    font-weight: 600;
                }

                .shopContentYc2 {
                    width: 270px;
                    height: 36px;
                }
            }
        }
    }

    // 详情
    .goodDetails {
        width: 345px;
        padding: 15px;

        .goodDetailstt {
            font-size: 14px;
            width: 100%;
            height: 14px;
            padding: 20px 0 12px;
        }

        .goodDetailsItem {
            width: 330px;
            padding: 4px 15px 5px 0;
            border-top: 1px dashed rgb(145 145 145);
            overflow: hidden;

            .left {
                float: left;
                color: #999;


            }

            .right {

                margin-left: 84px;
                line-height: 22px;

            }
        }
    }

    // 商品图片详情
    .goodImgDetails {
        width: 375px;
        height: 100px;
    }

    // 说明
    .goodExplain {
        width: 375px;

        .goodExplainShell {
            padding: 0 15px 15px;

            .shellHeader {
                padding: 29px 0 27px;
                font-size: 14px;
                text-align: center;
                position: relative;

                .shellHeaderB {
                    width: 80px;
                    height: 1px;
                    position: absolute;
                    border-left: 35px solid rgb(206, 206, 206);
                    border-right: 35px solid rgb(206, 206, 206);
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .shellContent {
                padding-bottom: 13px;

                .shellContentTT {
                    padding: 0 0 7.5px 9px;
                    position: relative;

                    .TTleft {
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: #dd1a21;
                        left: 0;
                        top: 2px;
                    }

                    .TTright {
                        font-size: 13px;
                        line-height: 13px;
                    }
                }

                .shellContentCT {
                    padding-left: 8px;
                    line-height: 18px;
                }
            }
        }
    }

    // 猜你喜欢
    .goodLike {
        .LikeHeader {
            padding: 29px 0 27px;
            font-size: 14px;
            text-align: center;
            position: relative;

            .LikeHeaderB {
                width: 80px;
                height: 1px;
                position: absolute;
                border-left: 35px solid rgb(206, 206, 206);
                border-right: 35px solid rgb(206, 206, 206);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        .contentList {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            // 单个商品卡片
            .contentGoods {
                position: relative;
                width: 172.5px;
                padding-bottom: 26px;

                // 商品图片
                .contentGoodImg {
                    width: 100%;
                    height: 172.5px;
                    border-radius: 10px;
                }

                .contentGoodText {
                    font-size: 14px;
                    line-height: 20px;

                    .logo1 {
                        height: 15px;
                        position: relative;
                        top: 2px;
                    }

                }

                .contentGoodRedpaper {
                    border: 1px solid #d6d6d6;
                    border-radius: 10px;
                    width: 62px;
                    height: 15px;
                    line-height: 15px;
                    padding-left: 3px;
                    vertical-align: middle;

                    .logo2 {
                        height: 10px;
                        position: relative;
                        top: 1px;
                    }
                }

                .contentGoodPrice {
                    color: #fa1e32;
                    height: 30px;
                    font-weight: bolder;

                    .text1 {
                        font-size: 20px;
                    }

                    .text2 {
                        font-weight: normal;
                        color: rgb(153, 153, 153);
                    }
                }

                .contentGoodActivity {
                    position: relative;
                    display: flex;
                    height: 23px;
                    align-items: center;
                    padding: 0 3px;
                    font-weight: bolder;
                    border-radius: 10px;
                    background-color: rgb(255, 233, 235);

                    .Text3 {
                        color: white;
                        padding: 2px 5px;
                        border-radius: 10px;
                        background-color: rgb(350, 30, 50);
                    }

                    .Text4 {
                        padding: 0 3px;
                        color: rgb(250, 30, 50);
                    }

                    .logo3 {
                        position: absolute;
                        top: -6px;
                        left: 13px;
                    }
                }

                .logo4 {
                    position: absolute;
                    width: 52.5px;
                    height: 27px;
                    top: 5px;
                    right: 5px;
                }
            }
        }
    }

    // 占位
    .zhanweiYc{
        width: 100%;
        height: 52px;
    }
    // 底部购买栏
    .goodFooter{
        width: 100%;
        height: 52px;
        display: flex;
        position: fixed;
        bottom: 0;
        .goodFooterItem1{
            width: 78px;
            line-height: 52px;
            text-align: center;
            vertical-align: middle;
            background-color: #fff;
            font-size: 30px;
            box-sizing: border-box;
            border-top:1px solid #c7c7c7;
            border-left:1px solid #c7c7c7;
        }
        .goodFooterItem2{
            background-color: #fff;
            width: 148.5px;
            box-sizing: border-box;
            line-height: 52px;
            text-align: center;
            vertical-align: middle;
            border-top:1px solid #c7c7c7;
            border-left:1px solid #c7c7c7;
        }
        .goodFooterItem3{
            width: 148.5px;
            background-color: #dd1a21;
            box-sizing: border-box;
            color: #fff;
            line-height: 52px;
            text-align: center;
            vertical-align: middle;
        }
    }
}


// 隐藏呼出栏
.actionCenter {
    padding: 26px 15px;
    width: 345px;
    height: 263px;
    border-top: #c9c9c9 1px solid;
    overflow: scroll;

    .actionCenterItem {
        margin-bottom: 22px;
        .actionHeader {
            margin-bottom: 8px;
            padding-left: 12px;
            height: 14px;
            position: relative;

            .actionHeaderA {
                position: absolute;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: #dd1a21;
                top: 0;
                left: 0;
            }
        }

        .actionContent {
            line-height: 21px;
            font-size: 14px;
            color: #7f7f7f;
        }
    }

}

// 下划线1
.dividerYc1 {
    border-bottom: #dadada 1px solid;

}
</style>